<template>
  <page-main>
      <div class="page-user-perfect">
          <div class="tips">请完善您的账户信息，便于进行收益提现</div>
          <van-form >
            <van-field
                v-model="form.accountName"
                input-align="right"
                label="账户名称"
                placeholder="请输入"
            />
            <van-field
                v-model="form.bankAccount"
                input-align="right"
                label="银行账号"
                placeholder="请输入"
            />
            <van-field
                v-model="form.bankName"
                input-align="right"
                label="开户行"
                placeholder="请选择"
                readonly 
                clickable
                @click="handlePaymentLines"
            />
            <van-field
                v-model="form.paymentLines"
                input-align="right"
                label="联行号"
                placeholder="请选择"
                readonly 
                clickable
                @click="handlePaymentLines"
            />
            <van-field
                v-model="form.idCard"
                input-align="right"
                label="身份证"
                placeholder="请输入"
            />
            <van-field name="uploader" label="身份证正面" input-align="right">
                <template #input>
                    <fly-upload :url.sync="form.idCardImgFront" :list="idCardImg.front" />
                </template>
            </van-field>
            <van-field name="uploader" label="身份证背面" input-align="right">
                <template #input>
                    <fly-upload :url.sync="form.idCardImgBack" :list="idCardImg.back"  />
                </template>
            </van-field>
            <div class="submit-form">
                <p class="c-mcolor" v-if="this.form.completeFlag != '0'" @click="submitPerfect('jump')">跳过</p>
                <van-button round block class="btn-mcolor" :loading="loading.submit" @click="submitPerfect('save')">保存</van-button>
            </div>
            </van-form>
            
      </div>
      <openbank-select ref="openbankSelect" @confirm="getBank" />
  </page-main>
</template>

<script>
import openbankSelect from '@/components/openbankSelect';
export default {
    data(){
        return{
            form:{
                accountName: null,
                bankName: null,
                bankAccount: null,
                paymentLines: null,
                idCard: null,
                idCardImgBack: null,
                idCardImgFront: null,
            },
            idCardImg:{
                front: [],
                back: []
            },
            loading:{
                submit: false,
            },
            init_data:{
                openBank_list: [],
            },
        }
    },
    components:{
        openbankSelect,
    },
    created(){
        let query = this.$route.query;
        if(JSON.stringify(query) != '{}'){
            this.form = query;
            if(this.form.idCardImgFront){
                this.idCardImg.front = [{url: this.form.idCardImgFront}];
            }
            if(this.form.idCardImgBack){
                this.idCardImg.back = [{url: this.form.idCardImgBack}];
            }
        }
    },
    methods:{
        getBank(data){
            this.form.paymentLines = data.id;
            this.form.bankName = data.name;
        },
        handlePaymentLines(val){
            this.$refs.openbankSelect.init();
        },
        veriftyForm(){
            if(this.form.completeFlag == '0'){
                if(!this.$verify.null(this.form.accountName, '请填写账号名称！')){
                    return false;
                }
                if(!this.$verify.null(this.form.bankAccount, '请填写银行账号！')){
                    return false;
                }
                if(!this.$verify.null(this.form.bankName, '请填写开户行！')){
                    return false;
                }
                if(!this.$verify.null(this.form.paymentLines, '请填写联行号！')){
                    return false;
                }
                if(!this.$verify.identity(this.form.idCard)){
                    return false;
                }
                if(!this.$verify.null(this.form.idCardImgFront, '请上传身份证正面！')){
                    return false;
                }
                if(!this.$verify.null(this.form.idCardImgBack, '请上传身份证背面！')){
                    return false;
                }
            }
            return true;
        },
        submitPerfect(type){
            if(!this.veriftyForm()){
                return false;
            }
            let params = {};
            if(type == 'jump'){
                params.id = this.form.id;
                params.completeFlag = '0';
            }else{
                params = Object.assign({}, this.form);
                params.completeFlag = '0';
            }
            this.loading.submit = true;
            this.$http('put', '/lgg/agency/complete', params, (data,msg) => {
                this.loading.submit = false;
                this.$router.push({path: '/layout/home'});
            }, msg => {
                this.loading.submit = false;
            });
        },

    }
}
</script>

<style>

</style>    